
export default {
    props: {
        message: {
            type: String,
            default: 'Hello',
        },
    },
    data() {
        return {
            slides: [
                {
                    src: "https://100000063-1252208446.file.myqcloud.com/images/分享图-1V11.jpg",
                    text: "1",
                },
                {
                    src: "https://100000063-1252208446.file.myqcloud.com/images/麦卡伦动态@2x (3).png",
                    text: "2",
                },
                {
                    src: "https://100000063-1252208446.file.myqcloud.com/images/01.jpg",
                    text: "3",
                },
                {
                    src: "https://100000063-1252208446.file.myqcloud.com/images/shear–celeste B@2x.png",
                    text: "4",
                },
                {
                    src: "https://100000063-1252208446.file.myqcloud.com/images/限定发售-图片@2x (1).png",
                    text: "5",
                },
                {
                    src: "https://100000063-1252208446.file.myqcloud.com/images/麦卡伦珍稀年份系列@2x (1).png",
                    text: "6",
                },
                {
                    src: "https://100000063-1252208446.file.myqcloud.com/images/麦卡伦传奇系列@2x.png",
                    text: "7",
                },
            ],
            currentIndex: 0,
            startX: 0,
            deltaX: 0,
            isDragging: false,
            containerWidth: 0,
            x: 0,
            transform:`translateX(${this.x}px)`,
        };
    },
    computed: {
        slideTransform() {
          // 计算当前幻灯片的 transform 值
          return `translateX(${this.currentIndex * -100}%)`;
        },
        transformX() {
          // 计算当前幻灯片的 transform 值
          return `translateX(${this.x}px)`
        }
      },
    methods: {
        touchStart(event) {
            this.startX = event.touches[0].clientX;
        },
        touchMove(event) {
            this.deltaX = event.touches[0].clientX - this.startX;
            if (this.deltaX < 300 && this.deltaX > -300) {
                this.x = this.deltaX;
            }
        },
        touchEnd() {
            this.x = 0;
            this.handleSwipe();
        },
        mouseDown(event) {
            this.startX = event.clientX;
            this.isDragging = true;
        },
        mouseMove(event) {
            if (this.isDragging) {
                this.deltaX = event.clientX - this.startX;
                this.handleSwipe();
            }
        },
        mouseUp() {
            if (this.isDragging) {
                this.handleSwipe();
                this.isDragging = false;
            }
        },
        handleSwipe() {
            if (this.deltaX > 50 && this.currentIndex > 0) {
                this.currentIndex--;
            } else if (
                this.deltaX < -50 &&
                this.currentIndex < this.slides.length - 1
            ) {
                this.currentIndex++;
            }
            this.deltaX = 0;
        },
        goToSlide(index) {
            this.currentIndex = index;
        },
        leftChange() {
            if (this.currentIndex <= 0) return;
            this.currentIndex--;
        },
        rightChange() {
            if (this.currentIndex >= this.slides.length - 1) return;
            this.currentIndex++;
        },
        onVideoEnded() {
            if (this.currentIndex >= this.slides.length - 1) return;
            this.currentIndex++;
        },
    },


    template: `  <div class="myswiper">
    <div
      class="myswiper-container"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
      :style="{ transform: this.transformX }"
    >
      <div
        class="myswiper-slide slide"
        v-for="(item, index) in slides"
        :key="index"
        :style="{ transform: this.slideTransform }"
      >
        <img :src="item.src" alt="" style="max-height: 300px" />
        <div
          style="
            border: 1px solid red;
            height: 100px;
            width: 100%;
            margin-top: 5px;
          "
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div  class="myswiper-pagination-container">
      <div class="myswiper-left-btn" @click="leftChange">
        <
      </div>
      <!-- 分页器 -->
      <div class="myswiper-pagination ">
        <span
          v-for="(slide, index) in slides"
          :key="index"
          :class="['myswiper-dot', { active: index <= currentIndex }]"
          @click="goToSlide(index)"
        ></span>
      </div>
      <div
        class="myswiper-left-btn"
        @click="rightChange"
      >
        >
      </div>
    </div>
  </div>`,
};